<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/NPU.png">
    <title>用户注册</title>
    <style>
        /* Reset & base */
        *{box-sizing:border-box;margin:0;padding:0}
        html,body{height:100%;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans CJK JP", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;background:linear-gradient(180deg,#f5f7fb 0%,#eef3fb 100%);color:#222}


        a{color:#2563eb;text-decoration:none}
        /* container */
        .wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
        .card{width:100%;max-width:520px;background:linear-gradient(180deg,rgba(255,255,255,0.95),#ffffff);border-radius:12px;box-shadow:0 8px 30px rgba(32,39,56,0.12);overflow:hidden;padding:28px}
        .header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
        .logo{width:48px;height:48px;border-radius:8px;background:url('images/NPU.png') center/cover no-repeat;flex:0 0 48px}
        .title{font-size:26px;font-weight:700}
        .subtitle{font-size:13px;color:#6b7280}

        form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
        input[type=text],input[type=password]{height:48px;padding:0 14px;border-radius:8px;border:1px solid #e6e9ef;background:transparent;outline:none;font-size:15px;transition:all .18s}
        input::placeholder{color:#9aa3b2}


        input:focus{box-shadow:0 6px 18px rgba(33,150,243,0.06);border-color:#4b9ff7}
        .row{display:flex;gap:12px}
        .half{flex:1}

        .alerts{min-height:34px;margin-bottom:6px}
        .alert{display:inline-block;padding:6px 10px;border-radius:6px;font-size:14px}
        .alert.success{color:#0b5;
            background:rgba(16,185,129,0.06)}
        .alert.error{color:#e00;background:rgba(239,68,68,0.06)}

        .actions{display:flex;gap:12px;align-items:center;margin-top:6px}
        .btn{height:46px;padding:0 18px;border-radius:10px;border:0;background:linear-gradient(90deg,#2f80ed,#56ccf2);color:#fff;font-weight:600;cursor:pointer;font-size:15px;box-shadow:0 6px 18px rgba(47,128,237,0.18)}
        .btn.secondary{background:transparent;color:#3b4553;border:1px solid #e6e9ef;box-shadow:none}

        #regst{margin-top:14px;font-size:14px;color:#4b5563}
        .link{font-weight:600}

        /* responsive */
        @media (max-width:560px){.card{padding:20px}.title{font-size:20px}}

    </style>

    <script src="js/regist.js"></script>

    <script>
        // Minimal client-side helpers for nicer UX while keeping original hooks


        function inputFocusStyle(e){e.classList.add('focus')}
        function inputBlurStyle(e){e.classList.remove('focus')}
        // preserve original validation hooks (these functions may exist in js/regist.js)
        function checkName(){try{if(window.checkName) return window.checkName();}catch(e){} }
        function checkRealName(){try{if(window.checkRealName) return window.checkRealName();}catch(e){} }

        // (MODIFICATION 2) 检查密码以提供 *实时文字提示*
        function checkPassword(){
            var pass = document.getElementById('password');
            var passAgain = document.getElementById('passwordAgain');
            var errorSpan = document.getElementById('passwordError');

            // 仅当确认密码框不为空时，才比较两者
            if (passAgain.value.length > 0 && pass.value !== passAgain.value) {
                errorSpan.style.display = 'block'; // 显示错误提示
            } else {
                errorSpan.style.display = 'none'; // 隐藏错误提示
            }

            // 尝试调用原始钩子 (如果存在)
            try{if(window.checkPassword_hook) return window.checkPassword_hook();}catch(e){}
        }

        function checkGender(){try{if(window.checkGender) return window.checkGender();}catch(e){} }
        function checkAddress(){try{if(window.checkAddress) return window.checkAddress();}catch(e){} }


        function checkTel(){try{if(window.checkTel) return window.checkTel();}catch(e){} }
        function checkGrade(){try{if(window.checkGrade) return window.checkGrade();}catch(e){} }
        function checkInstitute(){try{if(window.checkInstitute) return window.checkInstitute();}catch(e){} }
        function checkDormitory(){try{if(window.checkDormitory) return window.checkDormitory();}catch(e){} }

        // 这个 JSP 内联函数将调用从 js/regist.js 加载的同名函数
        function registCheck(el){
            try{
                if(window.registCheck) {
                    return window.registCheck(el); // 返回 true 或 false
                }
            }catch(e){
                console.error(e);
                return false; // 如果出错，阻止提交
            }
        }
    </script>
</head>
<body>
<div class="wrap">
    <div class="card">
        <div class="header">
            <div class="logo" aria-hidden="true"></div>


            <div>
                <div class="title">社团管理</div>
                <div class="subtitle">注册</div>
            </div>
        </div>

        <div class="alerts">
            <c:if test="${param.rs =='success' }"><font color="blue">&nbsp;&nbsp;&nbsp;<b font size = "4px" color=blue>注册成功，请登录</b></font></c:if>
            <c:if test="${param.rs =='fail' }"><font

                    color="red">&nbsp;&nbsp;&nbsp;<b size="4px" color=red>注册失败，请重新尝试</b></font></c:if>
            <c:if test="${param.rs =='exist' }"><font color="red">&nbsp;&nbsp;&nbsp;<b size="4px" color=red>登录名已存在</b></font></c:if>
            <c:if test="${param.rs =='incomplete' }"><font color="red">&nbsp;&nbsp;&nbsp;<b size="4px" color=red>请输入完整信息</b></font></c:if>
        </div>

        <form action="Regist" method="post" name="myfor">
            <input id="name"  name="username" type="text" placeholder="用户名" onblur="checkName();"
                   onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkName();" />
            <input id="realname" name="userrealname" type="text" placeholder="真实姓名" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkRealName();"
            />
            <input id="password" name="userpass" type="password" placeholder="密码" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkPassword();"
            />
            <input id="passwordAgain" name="repass" type="password" placeholder="确认密码" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkPassword();"
            />
            <span id="passwordError" style="color: #e00; display: none; font-size: 14px; padding-left: 5px; margin-top: -5px; margin-bottom: -5px;">两次输入密码不一致，请重新输入！</span>

            <input id="gender" name="usergender" type="text" placeholder="性别" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkGender();"
            />
            <input id="address" name="email" type="text" placeholder="邮箱" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkAddress();"
            />
            <input id="tel" name="phone" type="text" placeholder="电话" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkTel();"
            />
            <input id="grade" name="usergrade" type="text" placeholder="年级(大一/大二/大三/大四)" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkGrade();"
            />
            <input id="institute" name="userinstitute" type="text" placeholder="所属学院" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkInstitute();"
            />
            <input id="dormitory" name="useradd" type="text" placeholder="宿舍地址" onfocus="inputFocusStyle(this)" onblur="inputBlurStyle(this);checkDormitory()" />

            <div class="actions">
                <input type="submit" value="注 册" class="btn" onclick="return registCheck(this);"/>
                <input name="ope" type="hidden"  value="index"/>
                <button type="button" class="btn secondary" onclick="location.href='login.jsp'">登录</button>


            </div>
        </form>

        <div id="regst">
            如果您已有账号，请点击这里<a href="login.jsp" class="link">登录</a>
        </div>
    </div>
</div>
</body>
</html>